<template>
    <view>
      <view @click="getDraft(draft.tuanId)" v-for="(draft, index) in drafts" :key="index" class="draft-item">
        <text class="draft-title">{{ draft.tuanTitle.slice(0, 16) }}...</text>
        <view class="draft-content">{{ draft.tuanDetail.slice(0, 18) }}...</view>
        <image class="get-chat" src="/static/my-icons/chat.png" @click.stop="getChat(draft.tuanId)"/>
      </view>
      <view v-if="drafts.length === 0" class="no-drafts-message">
        空空如也~
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      farmerId: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        drafts: []
      };
    },
    onLoad() {
    },
    onShow() { // 添加 onShow 生命周期钩子
      this.drafts = [];
      //获取组团信息列表
      this.fetchDrafts();
    },
    methods: {
      //获取聊天信息
    getChat(tuanId){
      uni.navigateTo({
          url: `/subpkg/chat_interface/chat_interface?tuanId=${tuanId}`
        });
    },
      //获取组团信息列表
      fetchDrafts() {
        const userId = uni.getStorageSync('userId')
        console.log("--------userId:", userId);
        uni.$http
          .get(`/tuan/getMyJoin?userId=${userId}`)
          .then((res) => {
            console.log("查看我加入的组团", res.data);
            // 解析服务器返回的 JSON 数据
            const responseData = res.data;
            if (responseData.code === 200) {
              this.drafts = responseData.data;
            }
          })
          .catch((err) => {
            console.error('获取组团失败:', err);
          });
      },
      getDraft(tuanId) {
        console.log("点击了组团信息:", tuanId);
        uni.navigateTo({
          url: `/subpkg/joined_info/joined_info?tuanId=${tuanId}`
        });
      },
   
    }
  }
  </script>
  
  <style>
  .draft-item {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    position: relative;
  }
  
  .draft-title {
    font-size: 16px;
    font-weight: bold;
    display: block; 
  }
  
  .draft-content {
    font-size: 14px;
    color: #666;
    display: block; 
  }
  
  .get-chat {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  width: 25px; /* 添加: 设置图片宽度 */
  height: 25px; /* 添加: 设置图片高度 */
}
  
  .no-drafts-message {
    text-align: center;
    margin-top: 20vh;
    color: #999;
  }
  </style>